import React, { useState } from 'react';
import { ArrowLeft } from '@nutui/icons-react';
import { Menu, Input, Space } from 'antd';
import './MaintItem.css';
import { useNavigate } from 'react-router-dom';

export default function MaintItem() {
    let navigate = useNavigate()
    const [selectedCategory, setSelectedCategory] = useState('家具'); // 将初始值设置为'家具'
    const [equipment, setEquipment] = useState([
        // 家具类
        { key: '家具', value: '床' },
        { key: '家具', value: '沙发' },
        { key: '家具', value: '衣柜' },
        { key: '家具', value: '餐桌' },
        { key: '家具', value: '椅子' },
        { key: '家具', value: '茶几' },
        { key: '家具', value: '电视柜' },
        { key: '家具', value: '书桌' },
        { key: '家具', value: '梳妆台' },
        { key: '家具', value: '鞋柜' },

        // 家居类
        { key: '家居', value: '窗帘' },
        { key: '家居', value: '地毯' },
        { key: '家居', value: '装饰画' },
        { key: '家居', value: '绿植' },
        { key: '家居', value: '抱枕' },
        { key: '家居', value: '花瓶' },

        // 电路类
        { key: '电路', value: '插座' },
        { key: '电路', value: '开关' },
        { key: '电路', value: '电线' },
        { key: '电路', value: '配电箱' },
        { key: '电路', value: '电灯' },

        // 水暖类
        { key: '水暖', value: '水龙头' },
        { key: '水暖', value: '花洒' },
        { key: '水暖', value: '热水器' },
        { key: '水暖', value: '马桶' },
        { key: '水暖', value: '洗手盆' },

        // 门锁类
        { key: '门锁', value: '智能门锁' },
        { key: '门锁', value: '机械门锁' },
        { key: '门锁', value: '门吸' },
        { key: '门锁', value: '猫眼' },

        // 电器类
        { key: '电器', value: '空调' },
        { key: '电器', value: '电视' },
        { key: '电器', value: '冰箱' },
        { key: '电器', value: '洗衣机' },
        { key: '电器', value: '微波炉' },
        { key: '电器', value: '烤箱' },

        // 其它类
        { key: '其它', value: '梯子' },
        { key: '其它', value: '工具箱' },
        { key: '其它', value: '清洁用品' },
        { key: '其它', value: '灭火器' },
    ]);
    const onClick = (e) => {
        console.log('click', e.key);
        setSelectedCategory(e.key);
    };
    
    const getEquipmentByCategory = (category) => {
        return equipment.filter(item => item.key === category).map(item => ({ key: item.value, label: item.value }));
    };

    return (
        <div>
            <div className='MyHouse_top'>
                <ArrowLeft className="back-icon" width={"40px"} onClick={() => window.history.back()} />
                <span className="title-text">维修上报</span>
            </div>
            <div className='MaintItem_content'>
                <div className='MaintItem_content_left'>
                    <Menu mode="inline" onClick={(e) => onClick(e)} style={{ width: '100px' }} defaultSelectedKeys={['家具']} items={[
                        { key: "家具", label: "家具" },
                        { key: "家居", label: "家居" },
                        { key: "电路", label: "电路" },
                        { key: "水暖", label: "水暖" },
                        { key: "门锁", label: "门锁" },
                        { key: "电器", label: "电器" },
                        { key: "其它", label: "其它" }
                    ]} />
                </div>
                <div className='MaintItem_content_right'>
                    {selectedCategory && (
                        <Menu mode="inline" onClick={(e)=>{
                            sessionStorage.setItem('Item',JSON.stringify({title:e.key,type:selectedCategory}))
                            navigate('/maintInformation')
                        }} style={{ width: '300px' }} items={getEquipmentByCategory(selectedCategory)} />
                    )}
                </div>
            </div>
        </div>
    );
}